/**
 * Created by Administrator on 2017/9/5.
 */
//banner数据


$(document).ready(function(){

    var oBan=document.getElementsByClassName("banner")[0];
    var aSpan=oBan.getElementsByClassName("iconfont");
    var aImg=oBan.getElementsByTagName("img");
    var aDiv=document.getElementsByClassName("rad");
    var num=0;
    var index=5;
    var timer=null;
    var l=oBan.offsetWidth;
    for(var i=0;i<aImg.length;i++){
        aImg[i].style.left=i*l+"px";
        aImg[i].style.top=0+"px";
    }
    for(var i=0;i<aDiv.length;i++){
        aDiv[i].index=i;
        aDiv[i].onclick=function(){
            for(var i=0;i<aDiv.length;i++){
                aDiv[i].style.background="#fff";
            }
            this.style.background="#00c2de";
            num=this.index;
            playMove();
        };
        aDiv[i].onmouseover=function(){
            for(var i=0;i<aDiv.length;i++){
                aDiv[i].style.background="#fff";
            }
            this.style.background="#00c2de";
            aDiv[num].style.background="#00c2de";
            clearInterval(timer)
        };
        aDiv[i].onmouseout=function(){
            this.style.background="#fff";
            aDiv[num].style.background="#00c2de";
            timer=setInterval(setPlay,6000);
        }
    }
    for(var i=0;i<aSpan.length;i++){
        aSpan[i].onmouseover=function(){
            clearInterval(timer)
        };
        aSpan[i].onmouseout=function(){
            timer=setInterval(setPlay,6000);
        }
    }
    aSpan[0].onclick=function () {
        setPlay();
        clearInterval(timer)
    };
    aSpan[1].onclick=function () {
        clearInterval(timer)
        if(num==aImg.length-1){
            num=0;
        }else {
            num++;
        }
        for(var i=0;i<aDiv.length;i++){
            aDiv[i].style.background="#fff";
        }
        aDiv[num].style.background="#00c2de";
        playMove();
    };

    timer=setInterval(setPlay,6000);
    function setPlay(){
        if(num==0){
            aImg[num].style.zIndex=index++;
            aImg[aImg.length-1].style.left=-l+"px";
            num=aImg.length-1;
        }else {
            num--;
        }
        for(var i=0;i<aDiv.length;i++){
            aDiv[i].style.background="#fff";
        }
        aDiv[num].style.background="#00c2de";
        playMove();
    }
    function playMove(){
        aImg[num].style.zIndex=index++;
        for(var m=0;m<aDiv.length;m++){
            aDiv[m].style.zIndex=index++;
        }
        for(var n=0;n<aSpan.length;n++){
            aSpan[n].style.zIndex=index++;
        }
        if(num==0){
            move(aImg[aImg.length-1],{'left':-l});
        }else{
            move(aImg[num-1],{'left':-l});
        }
        move(aImg[num],{'left':0});
        if(num==aImg.length-1){
            move(aImg[0],{'left':l});
        }else{
            move(aImg[num+1],{'left':l});
        }
    }
    function move(obj, json) {
        clearInterval(obj.timer);
        var iCur=0;
        var iSpeed=0;
        obj.timer=setInterval(function(){
            var onStop=true;
            for(var attr in json){
                var target=json[attr];
                if(attr=="opacity"){
                    if(getStyle(obj,attr)!=0){
                        iCur=getStyle(obj,attr)*100||100;
                    }else{
                        iCur=0;
                    }
                }else{
                    iCur=parseInt(getStyle(obj,attr))||0;
                }
                if(target!=iCur){
                    onStop=false;
                    iSpeed=(target-iCur)/10;
                    iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
                    if(attr=="opacity"){
                        obj.style[attr]=(iCur+iSpeed)/100;
                        obj.style.filter="alpha(opacity:"+(iCur+iSpeed)+")";
                    }else{
                        obj.style[attr]=iCur+iSpeed+"px";
                    }
                }
            }
            if(onStop){
                clearInterval(obj.timer);
            }
        },30)
    }
    function getStyle(obj,attr){
        if(obj.currentStyle){
            return obj.currentStyle[attr];
        }else{
            return getComputedStyle(obj,false)[attr];
        }
    }


});